<!doctype html>
<html xmlns:th="http://www.thymeleaf.org " lang="en">
<head>
    <meta charset="utf-8">
    <title>个人详情</title>
    <!--设置是否为缩放模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- css -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/personal.css">
    <link rel="stylesheet" type="text/css" href="static/css/liMarquee.css">
    <!--    js-->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.js"></script>
    <script src="static/js/echarts.min.js"></script>
    <script src="static/js/swiper.min.js"></script>
    <script src="static/js/jquery.liMarquee.js"></script>
    <script type="text/javascript" src="static/js/Bubble.js"></script>
    <script src="static/js/personal.js"></script>

    <style>
        /* 自定义分页器 */
        .swiper-pagination {
            position: absolute;
            text-align: center;
            -webkit-transition: .3s opacity;
            -o-transition: .3s opacity;
            transition: .3s opacity;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            z-index: 10;
            text-align: center;
            margin: 0 auto;
            margin: 0 4px;
        }
        /* 分页器的大小 */
        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            display: inline-block;
            background: #ffffff;
            border-radius: 50%;
            margin: 0 8px;
        }
        /* 颜色 */
        .swiper-pagination-bullet-active {
            opacity: 1;
            background: #f1d88b;
            width: 40px;
            border-radius: 10px;
        }
    </style>
</head>
<body class="ksh">
<div id="load">
    <div class="load_img"><!-- 加载动画 -->
        <img class="jzxz1" src="static/images/jzxz1.png">
        <img class="jzxz2" src="static/images/jzxz2.png">
    </div>
</div>
<div style="right: 20px;top:10px;z-index: 99;position: fixed;display: flex">
    <div>
        <div style="width: 220px;opacity:0" class="selectSpan">
            <select class="selectpicker" id="selectSf" data-hide-disabled="true" data-size="5" data-live-search="true" title="检索学生信息"></select>
        </div>
    </div>
    <div>
        <a id="searchA">
            <button class="btn btn-default" type="button" id="searchBtn">查找</button>
        </a>
    </div>
    <div>
        <div>
            <span>
                <a th:href="@{/index}" class="btn_return"><button class="btn btn-primary">主页面</button></a>
            </span>
        </div>
    </div>
    <div>
        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#interveneModal">干预</button>
    </div>
</div>
<div class="visual">
    <div class="visual_left">
        <div class="visual_box" style="height: 40%">
            <div class="visual_title">
                <span>科目预警</span>
                <img src="static/images/ksh33.png">
            </div>
            <div class="visual_chart visualSfzsfl">
                <div class="visual_table">
                    <div class="table">
                        <div class="th">
                            <span style="width: 40%">课程名称</span>
                            <span style="width: 30%">往年挂科率</span>
                            <span style="width: 30%">挂科预警</span>
                        </div>
                        <div class="visual_body" style=" height:auto">
                            <ul class="tableul">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="visual_box" style="height: 60%">
            <div class="visual_title">
                <span>个人成绩与年级均分</span>
                <img src="static/images/ksh33.png">
            </div>
            <div class="swiper-container visual_swiper_prop visual_chart">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" id="main_grade1"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="visual_con">
        <div class="visual_conBot">
            <div class="visual_conBot_bot collapse in">
                <div class="visual_chart " id="main_form" style="height: 100%;overflow-x: hidden;border: none">
                    <form>
                            <img src="static/images/people.jpeg">
                        <span>
                            <label for="name" >姓名:</label>
                            <input type="text" name="name" disabled="disabled">
                        </span>
                        <span>
                            <label for="pname" >拼音:</label>
                            <input type="text" name="pname" disabled="disabled">
                        </span>
                        <span>
                            <label for="id" >学号:</label>
                            <input type="text" name="id" disabled="disabled" th:value="${id}">
                        </span>
                        <span>
                            <label for="classname" >班级:</label>
                            <input type="text" name="classname" disabled="disabled">
                        </span>
                        <span>
                            <label for="direct" >专业:</label>
                            <input type="text" name="direct" disabled="disabled">
                        </span>
                        <span>
                            <label for="grade" >年级:</label>
                            <input type="text" name="grade" disabled="disabled">
                        </span>

                        <span>
                            <label for="nation" >民族:</label>
                            <input type="text" name="nation" disabled="disabled">
                        </span>
                        <span>
                            <label for="politic" >政治面貌:</label>
                            <input type="text" name="politic" disabled="disabled">
                        </span>
                        <span>
                            <label for="faculty" >学院:</label>
                            <input type="text" name="faculty" disabled="disabled">
                        </span>
                    </form>
                </div>
                <span style="z-index: 99;float: bottom;bottom: 25px;left: 95%" class="visual_chart">
<!--                    <button type="button" >展开</button>-->
                    <strong><a href="#" class="openBtn" style="color: black;font-size: medium">展开</a></strong>
                </span>
<!--                <span style="z-index: 99;float: bottom;bottom: 0px;right: 0px" class="visual_chart">-->
<!--                    <button type="button" class="btn-primary">趋势</button>-->
<!--                </span>-->
            </div>

            <div class="visual_chart" id="main_pradar"></div>
        </div>
    </div>
    <div class="visual_right">
        <div class="visual_box" style="height: 40%">
            <div class="visual_title">
                <span>课程推荐</span>
                <img src="static/images/ksh33.png">
            </div>
            <div class="visual_chart" >
                <div class="tagcloud">
                    <!-- bo大小 co颜色 -->
                </div>
            </div>
        </div>
        <div class="visual_box visualSfzsfl" style="height: 60%">
            <div class="visual_title">
                <span>上学期成绩变化趋势</span>
                <img src="static/images/ksh33.png">
            </div>
            <div class="visual_chart" id="main_ptrend" style="height: 100%"></div>
        </div>
    </div>
</div>
<!-- 干预模态框（Modal） -->
<div class="modal fade" id="interveneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position: center">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    意见及建议
                </h4>
            </div>
            <div class="modal-body">
                <textarea class="adviceText" rows="5" style="width: 100%;"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary submitBtn" >
                    提交
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="alert">
    <span class="alertText"></span>
</div>
</body>
<script>
    var stu = '[[${student}]]'
    var data = {student:stu}
    var stuInfo;
    var idData;
    var adviceData;
    var loading = true;
    var cloudSize = ['b01','b02','b03','b04'];
    var cloudColor = ['co01','co02','co03','co04','co05']
    window.onload = function (){
        //基本信息
        personalInfo()
        //科目预警
        preScore()
        //个人成绩与年纪均分
        avrageScore()
        //课程推荐
        preCourse()
        //变化趋势
        scoreTrend()
        //雷达图
        radarCharts()
    }
    function personalInfo(){
        $.ajax({
            url:'/tbStudent/likeFind',
            type: 'POST',
            data: data,
            dataType:"JSON",
            async:false,
            success:function (data){
                stuInfo = data
                idData = {id:stuInfo[0].id}
                var inputs =$('form input')
                for(let item in inputs){
                    var name = inputs.eq(item).attr('name')
                    inputs.eq(item).attr('value',stuInfo[0][name])
                }
                loading = false;
            }
        })
    }
    function preScore(){
        $.ajax({
            url:'/tbPredictScore/predictScore',
            type: 'POST',
            data: idData,
            dataType: "JSON",
            async:false,
            success:function (data){
                for(let item in data){
                    var str = data[item].pscore === 1?'是' :'否'
                    var html = '<li>\n' +
                        '\t\t\t\t\t\t\t\t\t<span class="text-name">'+data[item].className+'</span>\n' +
                        '\t\t\t\t\t\t\t\t\t<span class="text-w">'+(data[item].rate * 100).toFixed(2) +'%'+'</span>\n' +
                        '\t\t\t\t\t\t\t\t\t<span class="text-b">'+str+'</span>\n' +
                        '\t\t\t\t\t\t\t\t</li>'
                    $('.tableul').append(html)
                }
            }
        })

    }
    function avrageScore(){
        //个人成绩与年级均分
        $.ajax({
            url:'/tbScore/studentScore',
            type: 'POST',
            data: idData,
            dataType: "JSON",
            async:false,
            success:function (data){
                // console.log(data)
                for(var item =0;item<6;item++){
                    className.push(data[item].className)
                    scoreData.push(data[item].score)
                    aveData.push(data[item].average)
                }
            }
        })
        var myChart_grade = echarts.init(document.getElementById('main_grade1'));
        myChart_grade.setOption(option_grade1);
    }
    function preCourse(){
        courseData = ['数据科学与AI大数据应用','应用密码学与网络安全','SOC微体系结构设计','数据挖掘','模拟电子技术基础','云计算技术（微软合作）','Android应用开发','营销管理','图论与网络科学',
            '敏捷软件开发实战指南','组网与运维','计算机图形学','量子信息与量子计算','协议分析与设计','软件工程经济学']
        $.ajax({
            url:'/tbRecommendCourse/list',
            type: 'POST',
            data: idData,
            dataType: "JSON",
            async:false,
            success:function (data){

                // for(let item in data){
                //     var size = Math.floor(Math.random() * cloudSize.length + 1)-1;
                //     var color = Math.floor(Math.random() * cloudColor.length + 1)-1;
                //     var html = '<a class=" '+ cloudSize[size] +' '+  cloudColor[color] +'">'+data[item].className+'</a>'
                //     $('.tagcloud').append(html)
                // }
                for(var item = 0; item<5; item++){
                    var index = Math.floor((Math.random()*courseData.length));
                    var size = Math.floor(Math.random() * cloudSize.length + 1)-1;
                    var color = Math.floor(Math.random() * cloudColor.length + 1)-1;
                    var html = '<a class=" '+ cloudSize[size] +' '+  cloudColor[color] +'">'+courseData[index]+'</a>'
                    $('.tagcloud').append(html)
                }
                cloudActive()
            }
        })
    }
    function scoreTrend(){
        //上学期成绩变化趋势

        var myChart_ptrend = echarts.init(document.getElementById('main_ptrend'));
        myChart_ptrend.setOption(option_ptrend);
    }
    var myChart_pradar = echarts.init(document.getElementById('main_pradar'));
    function radarCharts(){
        //雷达
        $.ajax({
            url:'/tbIndicators/average',
            type: 'GET',
            contentType:"application/json",
            async:false,
            success:function (data){
                radarData = Object.values(data)
                radarKey = Object.keys(data)
            }
        })
        var sum = 0, max = radarData[0]*10;
        radarData.forEach(item => {
            item = item*10
            sum += item
            if(item >= max) max = item
        })
        var number = Math.round(max * 0.5)
        for(var item in radarData){
            showData.push((number + radarData[item]).toFixed(2))
        }
        $.ajax({
            url:'/tbIndicators/selectById',
            type: 'POST',
            data: idData,
            dataType: "JSON",
            async:false,
            success:function (data){
                for (let item in radarKey){
                    sradarData.push(data[radarKey[item]])
                }
                emphasizeColor()
                sradarData.forEach(item => {
                    item = item*10
                    sum += item
                    if(item >= max) max = item
                })
                for(var item in sradarData){
                    sshowData.push((number + sradarData[item]).toFixed(2))
                }
            }
        })
        myChart_pradar.setOption(option_pradar);
    }
    function emphasizeColor(){
        for(let item in sradarData){
            if(sradarData[item] < 0){
                option_pradar.radar[0].indicator[item].color = 'red'
            }
        }
    }
</script>
<script type="text/javascript">
    $(function(){
        var sfzcllH=$('.sfzcll_box').height()
        var sfzcllHtwo=sfzcllH-2
        $('.sfzcll_box').css('line-height',sfzcllH+'px')
        $('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px')
        //删除加载动画
        $('#load').fadeOut(100)
        setTimeout(function(){$('#load').remove()},110);
    })
</script>
<!--3D标签云-->
<script type="text/javascript">
    function cloudActive(){
        tagcloud({
            selector: ".tagcloud",  //元素选择器
            fontsize: 6,       //基本字体大小, 单位px
            radius: 60,         //滚动半径, 单位px 页面宽度和高度的五分之一
            mspeed: "slow",   //滚动最大速度, 取值: slow, normal(默认), fast
            ispeed: "slow",   //滚动初速度, 取值: slow, normal(默认), fast
            direction: 0,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
            keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
        });
    }
</script>
<script>
    <!--	操作栏-->
    var href = "/personal?student=";
    $('#searchA').on("click", function () {
        var inputInfo = $(".selectpicker").val()
        if(!inputInfo){
            $('.alert').addClass('alert-warning')
            $('.alertText')[0].innerText = '请输入学生信息'
            setTimeout(function(){
                $('.alert').removeClass('alert-warning')
                $('.alertText')[0].innerHTML = ''
            },1500);

        }else {
            $(this).attr('href',href + inputInfo)
        }
    });
    var displayFlag = false;
    $('#searchBtn').on("mouseenter", function () {
        if(!displayFlag){
            $(".selectSpan")[0].style.cssText='opacity:100%;'
            displayFlag = true
        }else {
            // $(".selectSpan")[0].style.cssText='opacity:0%;'
            // displayFlag = false
        }
    });
    $(function () {
        $('.selectpicker').selectpicker('refresh');
        $('.selectpicker').selectpicker('render');
    })
    //下拉框数据加载
    $.ajax({
        url:'/tbStudent/findAll',
        type: 'GET',
        contentType:"application/json",
        async:false,
        success:function (data){
            for (let item in data){
                var studentLi = data[item].id + '-' + data[item].name + '-' + data[item].faculty
                var html = '<option value=\''+data[item].id+'\'>'+studentLi+'</option>'
                $(".selectpicker").append(html);
            }
        }
    })
</script>
<script>
    var open  = false;
    $('.openBtn').on("click",function (){
        if(open){
            $('.visual_conBot_bot')[0].style.cssText = "height:calc(40% - 8px)"
            $('#main_pradar')[0].style.cssText = "height:calc(60% - 8px)"
            myChart_pradar.resize();
            open = false
            $('.openBtn')[0].innerText = '展开'
        }else {
            $('.visual_conBot_bot')[0].style.cssText = "height:calc(60% - 8px)"
            $('#main_pradar')[0].style.cssText = "height:calc(40% - 8px)"
            myChart_pradar.resize();
            open = true
            $('.openBtn')[0].innerText = '折叠'
        }
    })
    $('.submitBtn').on("click",function (){
        adviceData = {id:stuInfo[0].id,intervene:1,advice:$('.adviceText').val()}
        $.ajax({
            url:'/tbIndicators/updateText',
            type: 'POST',
            data: adviceData,
            dataType: "JSON",
            async:false,
        })
        $('.alert').addClass('alert-success')
        $('.alertText')[0].innerHTML = '提交成功!'
        $('.modal').removeClass('in')
        $('.modal-backdrop').removeClass('in')
        // $('.modal').style.cssText = 'display:none'
        setTimeout(function(){
            $('.alert').removeClass('alert-success')
            $('.alertText')[0].innerHTML = ''
        },1500);

    })
</script>
</html>